<template>
  <div class="p-6 space-y-6">
    <!-- 欢迎横幅 -->
    <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white shadow-lg">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold mb-2">欢迎回来，Admin！</h1>
          <p class="text-blue-100">今天是美好的一天，让我们开始工作吧</p>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold">{{ currentTime }}</div>
          <div class="text-blue-100">{{ currentDate }}</div>
        </div>
      </div>
    </div>
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-1">
      <div class="card hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm">总用户数</p>
            <p class="text-3xl font-bold text-blue-600 dark:text-blue-400">1,234</p>
            <p class="text-green-600 text-sm">+12% 较上月</p>
          </div>
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
            <i class="i-solar:user-id-broken w-6 h-6 text-blue-600 dark:text-blue-400" />
          </div>
        </div>
      </div>

      <div class="card hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm">活跃用户</p>
            <p class="text-3xl font-bold text-green-600 dark:text-green-400">856</p>
            <p class="text-green-600 text-sm">+8% 较昨日</p>
          </div>
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
            <i class="i-solar:diagram-up-bold w-6 h-6 text-green-600 dark:text-green-400" />
          </div>
        </div>
      </div>

      <div class="card hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm">系统负载</p>
            <p class="text-3xl font-bold text-orange-600 dark:text-orange-400">67%</p>
            <p class="text-orange-600 text-sm">正常范围</p>
          </div>
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center">
            <i class="i-solar:server-square-update-bold w-6 h-6 text-orange-600 dark:text-orange-400" />
          </div>
        </div>
      </div>

      <div class="card hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm">插件数量</p>
            <p class="text-3xl font-bold text-purple-600 dark:text-purple-400">23</p>
            <p class="text-purple-600 text-sm">+3 本月新增</p>
          </div>
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
            <i class="i-solar:plug-circle-linear w-6 h-6 text-purple-600 dark:text-purple-400" />
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="card">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">用户增长趋势</h3>
        <div class="h-64 bg-gray-50 dark:bg-gray-700 rounded-lg flex items-center justify-center">
          <div class="text-center text-gray-500 dark:text-gray-400">
            <i class="i-solar:chart-line w-16 h-16 mx-auto mb-4" />
            <p>图表区域</p>
            <p class="text-sm">可集成 ECharts 或其他图表库</p>
          </div>
        </div>
      </div>

      <div class="card">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">系统状态</h3>
        <div class="space-y-4">
          <div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-3 h-3 bg-green-500 rounded-full"></div>
              <span class="text-gray-800 dark:text-gray-200">数据库连接</span>
            </div>
            <span class="text-green-600 dark:text-green-400 text-sm">正常</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-3 h-3 bg-green-500 rounded-full"></div>
              <span class="text-gray-800 dark:text-gray-200">缓存服务</span>
            </div>
            <span class="text-green-600 dark:text-green-400 text-sm">正常</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
              <span class="text-gray-800 dark:text-gray-200">文件存储</span>
            </div>
            <span class="text-yellow-600 dark:text-yellow-400 text-sm">警告</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷操作 -->
    <div class="card">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">快捷操作</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <button class="dashboard-btn dashboard-btn-blue">
          <i class="i-solar:user-plus-bold-duotone w-8 h-8 dashboard-icon-blue mb-2" />
          <span class="dashboard-text">新增用户</span>
        </button>
        <button class="dashboard-btn dashboard-btn-green">
          <i class="i-solar:file-text-bold-duotone w-8 h-8 dashboard-icon-green mb-2" />
          <span class="dashboard-text">生成报表</span>
        </button>
        <button class="dashboard-btn dashboard-btn-purple">
          <i class="i-solar:settings-bold-duotone w-8 h-8 dashboard-icon-purple mb-2" />
          <span class="dashboard-text">系统设置</span>
        </button>
        <button class="dashboard-btn dashboard-btn-orange">
          <i class="i-solar:bookmark-bold-duotone w-8 h-8 dashboard-icon-orange mb-2" />
          <span class="dashboard-text">收藏夹</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import { ref, onMounted } from 'vue'

const currentTime = ref('')
const currentDate = ref('')

function updateTime() {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
  })
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})

defineOptions({ name: 'dashboard' })
</script>
